<template>
	<div>
		<my-header :backBtn="true">
			<div slot="title">
				人脸录入
			</div>
		</my-header>
		<div class="photoTips">
			<p>人脸照片录入注意事项：</p>
			<p>1、尽量选取光线充足的地方进行拍照；</p>
			<p>2、拍照过程中将美颜功能暂时关闭；</p>
			<p>3、只拍取上半身的相片，以便提高识别度。</p>
			<p>当前【{{status.name}}】人脸信息：
				<span v-if="!status||!status.face" style="color: orangered">
					未录入
				</span>
				<span v-if="status.face.startsWith('0')" style="color: orange">
					已录入，生成中
				</span>
				<span v-if="status.face.startsWith('1')" style="color: green">
					已认证
				</span>
				<span v-if="status.face.startsWith('2')" style="color: red">
					认证中
				</span>
        <span v-if="status.face.startsWith('-1')" style="color: red">
					认证失败
				</span>
        <span v-if="status.face.startsWith('-2')" style="color: red">
					认证失败
				</span>
			</p>
		</div>
		<div class="cameraIcon">
			<img src="../../static/img/cammera.png" @click="fileInputFn">
		</div>
		<form id="uploadForm">
			<input ref="fileInput" type="file" name="" id="" accept="image/*" @change="uploadFile" style="position: relative;left: 99999999999px;">
		</form>
		<div style="border-radius: 2px">
			<img style="max-width: 12rem;max-height: 14rem" :src="status.downloadUrl" @click="previewImage">
		</div>
	</div>
</template>
<script>
	import Exif from 'exif-js';
	import wx from "weixin-js-sdk";
	import $ from 'jquery';

	export default {
		name: 'photograph',
		props: {
			id: ''
		},
		data() {
			return {
				loginType: this.$Cookies.get('loginType'),
				headerImage: '', // 展示头像
				avatarFile: '', // 头像
				cos: null,
				options: {
					token: '',
					domain: '',
					uploadServer: ''
				},
				user: {
					id: '',
					loginType: ''
				},
				status: {
					downloadUrl: '',
					face: '',
					name: '',
				}
			};
		},
		methods: {

			getWxConfig() {
				let url = window.location.href;

				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['previewImage'] // 必填，需要使用的JS接口列表
					});
				})
			},
			previewImage() {
				let url = this.status.downloadUrl;
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			back() {
				history.back();
			},
			fileInputFn() {
				this.$refs.fileInput.click();
			},
			getCosCredential() {
				let that = this;
				that.$http.getCosCredential().then(resp => {
					this.options = resp.data;
				});
			},
			dataURLtoFile(dataurl, filename) { //将base64转换为文件
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			},
			upload() {
				let that = this;
				let fileName = 'face_' + new Date().getTime() + '.jpg';
				let f = this.dataURLtoFile(this.headerImage, fileName)
				this.cos.putObject({
					Bucket: this.options.bucket,
					Region: this.options.region,
					Key: fileName,
					Body: f,
				}, function(err, resp) {
					if (resp.statusCode === 200) {
						that.user.faceImage = fileName;
						that.$http.uploadFaceImage(that.user).then(resp => {
							that.$weui.toast('上传成功');
							that.getFaceStatus();
						});
						that.$toast.hide();
					}
				});
			},
			// 上传文件
			uploadFile(e) {
				// this.avatarFile = e.target.value
				let files = e.target.files || e.dataTransfer.files;
				if (!files.length) return;
				this.$toast.show('上传中...', 'loading');
				this.avatarFile = files[0];
				let formData = new FormData();
				formData.append('file', this.avatarFile);
				let fileName = 'face_' + new Date().getTime() + '.jpg';
				formData.append('key', fileName);
				formData.append("token", this.options.token);
				let that = this;
				$.ajax({
					url: this.options.uploadServer,
					type: 'post',
					data: formData,
					processData: false,
					contentType: false,
					success: function(resp) {
						that.user.faceImage = fileName;
						that.$http.uploadFaceImage(that.user).then(resp => {
							that.$weui.toast('上传成功');
							that.getFaceStatus();
						});
					},
					error: function(resp) {
						that.$weui.toast('上传失败');
					},
					complete: function() {
						that.$toast.hide();
					}
				})
				//this.imgPreview(this.avatarFile);
			},
			imgPreview(file) {
				let self = this;
				let Orientation;
				// 去获取拍照时的信息，解决拍出来的照片旋转问题
				Exif.getData(file, function() {
					Orientation = Exif.getTag(this, 'Orientation');
				});
				// 看支持不支持FileReader
				if (!file || !window.FileReader) return;
				if (/^image/.test(file.type)) {
					// 创建一个reader
					let reader = new FileReader();
					// 将图片2将转成 base64 格式
					reader.readAsDataURL(file);
					// 读取成功后的回调
					reader.onloadend = function() {
						let img = new Image();
						img.src = this.result;
						// 判断图片是否大于100K,是就直接上传，反之压缩图片
						if (this.result.length <= 100 * 1024) {
							self.headerImage = this.result;
							self.postImg();
						} else {
							img.onload = function() {
								let data = self.compress(img, Orientation);
								self.headerImage = data;
								self.postImg();
							};
						}
					};
				}
			},
			postImg() {
				this.upload();
			},
			rotateImg(img, direction, canvas) {
				// 最小与最大旋转方向，图片旋转4次后回到原方向
				const minStep = 0;
				const maxStep = 3;
				if (img == null) return;
				// img的高度和宽度不能在img元素隐藏后获取，否则会出错
				let height = img.height;
				let width = img.width;
				let step = 2;
				if (step == null) {
					step = minStep;
				}
				if (direction === 'right') {
					step++;
					// 旋转到原位置，即超过最大值
					step > maxStep && (step = minStep);
				} else {
					step--;
					step < minStep && (step = maxStep);
				}
				// 旋转角度以弧度值为参数
				let degree = step * 90 * Math.PI / 180;
				let ctx = canvas.getContext('2d');
				switch (step) {
					case 0:
						canvas.width = width;
						canvas.height = height;
						ctx.drawImage(img, 0, 0);
						break;
					case 1:
						canvas.width = height;
						canvas.height = width;
						ctx.rotate(degree);
						ctx.drawImage(img, 0, -height);
						break;
					case 2:
						canvas.width = width;
						canvas.height = height;
						ctx.rotate(degree);
						ctx.drawImage(img, -width, -height);
						break;
					case 3:
						canvas.width = height;
						canvas.height = width;
						ctx.rotate(degree);
						ctx.drawImage(img, -width, 0);
						break;
				}
			},
			compress(img, Orientation) {
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext('2d');
				// 瓦片canvas
				let tCanvas = document.createElement('canvas');
				let tctx = tCanvas.getContext('2d');
				let width = img.width;
				let height = img.height;
				console.log("init:width  " + width, "height:" + height)
				// 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
				let ratio;
				if ((ratio = width * height / 4000000) > 1) {
					ratio = 8;
					width /= ratio;
					height /= ratio;
				} else {
					ratio = 1;
				}
				canvas.width = width;
				canvas.height = height;
				console.log("大于400 :width  " + width, "height:" + height)
				//        铺底色
				ctx.fillStyle = '#fff';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				// 如果图片像素大于100万则使用瓦片绘制
				let count;
				if ((count = width * height / 1000000) > 1) {
					count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片
					//            计算每块瓦片的宽和高
					let nw = ~~(width / count);
					let nh = ~~(height / count);
					tCanvas.width = nw;
					tCanvas.height = nh;
					for (let i = 0; i < count; i++) {
						for (let j = 0; j < count; j++) {
							tctx.drawImage(
								img,
								i * nw * ratio,
								j * nh * ratio,
								nw * ratio,
								nh * ratio,
								0,
								0,
								nw,
								nh
							);
							console.log("大于 100 :width  " + width, "height:" + height);
							ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
						}
					}
				} else {
					console.log("<100 :width  " + width, "height:" + height)
				}
				ctx.drawImage(img, 0, 0, width, height);
				// 修复ios上传图片的时候 被旋转的问题
				if (Orientation !== '' && Orientation !== 1) {
					switch (Orientation) {
						case 6: // 需要顺时针（向左）90度旋转
							this.rotateImg(img, 'left', canvas);
							break;
						case 8: // 需要逆时针（向右）90度旋转
							this.rotateImg(img, 'right', canvas);
							break;
						case 3: // 需要180度旋转
							this.rotateImg(img, 'right', canvas); // 转两次
							this.rotateImg(img, 'right', canvas);
							break;
					}
				}
				// 进行最小压缩
				let ndata = canvas.toDataURL('image/png', 0.1);
				tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
				return ndata;
			},
			getFaceStatus() {
				this.$http.fetchFaceStatus({
					loginType: this.user.loginType,
					id: this.user.id
				}).then(resp => {
					this.status = resp.data;
				})
			}
		},
		created() {
			this.user = this.$route.query;
		},
		mounted() {
			this.getCosCredential();
			this.getFaceStatus();
			this.getWxConfig();
		}
	};
</script>

<style scoped>
	.cameraIcon {
		width: 8rem;
		margin: 5rem auto;
		border: 1px solid #2aa7e1;
		border-radius: 5px;
		background: rgba(42, 167, 225, 0.1);
	}

	.file input {
		position: absolute;
		right: 0;
		top: 0;
		opacity: 0;
	}

	.photoTips {
		text-align: left;
		margin: 1rem 0px 0px 2rem;
		font-size: 1.5rem;
		line-height: 4rem;
		color: #767676;
	}
</style>
